<template>
  <div class="login">
    <my-header></my-header>
    <img src="../assets/logo.png" width="200" style="margin: 0 auto">
    <div class="hello">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="line-height: 36px;">Login my blog</span>
        </div>
        <div class="text item">
          <div>
            <label class="el-icon-edit"></label>
            <el-input class="el-input-custom" v-model="userName" data-index="0" placeholder="请输入用户名" name="userName"
                      @change="v_userName($event)"></el-input>
            <span class="el-icon-circle-check iconCheck" v-show="iconCheck[0]"></span>
            <span class="el-icon-circle-cross iconClose" v-show="iconClose[0]"></span>
            <el-collapse-transition>
              <span class="spanTip" v-show="iconClose[0]">用户名不能少于6个字符</span>
            </el-collapse-transition>
          </div>
          <div>
            <label class="el-icon-edit"></label>
            <el-input v-model="psw" data-index="1" placeholder="请输入密码" name="password"
                      @change="v_password($event)"></el-input>
            <span class="el-icon-circle-check iconCheck" v-show="iconCheck[1]"></span>
            <span class="el-icon-circle-cross iconClose" v-show="iconClose[1]"></span>
            <el-collapse-transition>
              <span class="spanTip" v-show="iconClose[1]">密码不能少于6个字符</span>
            </el-collapse-transition>
          </div>
          <div>
            <el-button type="info" @click="userAdd">新增用户</el-button>
            <el-button :plain="true" type="info" @click="userQuery">查询用户</el-button>
            <el-button :plain="true" type="info" @click="userUpdate">更新用户</el-button>
            <el-button :plain="true" type="info" @click="userDelete">删除用户</el-button>
          </div>
        </div>
      </el-card>
    </div>
    <Table :columns="columns1" :data="dataTable"></Table>
    <my-footer></my-footer>
  </div>
</template>

<script>
  import header from '../components/Header.vue'
  import footer from '../components/Footer.vue'
  import api from '../router/api'
  export default {
    name: 'hello',
    data () {
      return {
        userName: '',
        psw: '',
        iconCheck: [false, false],
        iconClose: [false, false],
        columns1: [
          {
            title: '姓名',
            key: 'userName'
          },
          {
            title: '密码',
            key: 'password'
          },
        ],
        dataTable: []
      }
    },
    methods: {
      v_userName: function (e) {
        let thisInfo = e;
        let validate = /^[a-zA-Z0-9]{6,10}$/;
        if (validate.test(thisInfo)) {
          this.iconCheck[0] = true;
          this.iconClose[0] = false;
        } else {
          this.iconCheck[0] = false;
          this.iconClose[0] = true;
        }
      },
      v_password: function (e) {
        let thisInfo = e;
        let validate = /^[a-zA-Z0-9]{6,10}$/;
        if (validate.test(thisInfo)) {
          this.iconCheck[1] = true;
          this.iconClose[1] = false;
        } else {
          this.iconCheck[1] = false;
          this.iconClose[1] = true;
        }
      },
      userAdd: function () {
        let $this = this;
        let params = {
          userName: $this.userName,
          password: $this.psw
        }
        $this.$post($this, api.create, params)
          .then(function (response) {
            $this.$Message.error(response.message);
            $this.userQuery();
          });
      },
      userQuery: function () {
        let $this = this;
        $this.$get($this, api.query)
          .then(function (response) {
              $this.dataTable = response.data;
          });
      },
      userUpdate: function () {
        let $this = this;
        let params = {
          userName: $this.userName,
          newPassword: $this.psw
        }
        $this.$post($this, api.update, params)
          .then(function (response) {
            $this.$Message.error(response.message);
            $this.userQuery();
          });
      },
      userDelete: function () {
        let $this = this;
        let params = {
          userName: $this.userName,
        };
        if (Boolean($this.userName)) {
          $this.$post($this, api.delete, params)
            .then(function (response) {
              console.log(response);
            });
        }else {
          $this.$Message.error("目标账号不存在");
        }
      },
    },
    created: function () {
      this.userQuery();
    },
    components: {
      'my-header': header,
      'my-footer': footer,
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .login {
    text-align: center;
    display: flex;
    flex-flow: column;
    min-height: 100vh;
  }

  .hello {
    flex: 1;
  }

  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .text > div {
    margin: 0 0 10px;
    position: relative;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
    margin: 0 auto;
  }

  .el-input {
    width: 80%;
  }

  .el-input-custom input {
    padding: 3px 20px;
  }

  .iconCheck {
    right: 45px;
    top: 12px;
    color: #41b883;
    position: absolute;
  }

  .iconClose {
    right: 45px;
    top: 12px;
    color: #ff4949;
    position: absolute;
  }

  .spanTip {
    display: block;
    color: #ff4949;
  }
</style>
